<template>
  <div>
    <div class="main-tab">
      <div class="top">
        <span class="tit">我的</span>
      </div>
      <div class="part1">
        <div class="balance">
          <div class="balance-title" v-if="loginStatus">待提现金额</div>
          <div class="balance-amount" v-if="loginStatus">0.00</div>
          <x-button plain class="login-button" v-else link="registrationLogin">注册/登录</x-button>
        </div>
        <div class="balance-handle">
          <div class="balance-detail" @click="goWallet">
            <img class="balance-icon" src="../../../static/img/my-1.png" />
            <div class="balance-icon-name">查看明细</div>
          </div>
          <div class="gap"></div>
          <div class="balance-withdrawal" @click="goCash">
            <img class="balance-icon" src="../../../static/img/my-2.png" />
            <div class="balance-icon-name">立即提现</div>
          </div>
        </div>
      </div>
      <group class="group">
        <cell class="cell" :title="item.title" is-link v-for=" (item, index) in cellList" :key="index" :link="item.path" >
          <img slot="icon" width="25" class="cell-icon" :src="item.icon"/>
        </cell>
        <cell class="cell" title="联系客服" is-link @click.native="service" >
          <img slot="icon" width="25" class="cell-icon" src="../../../static/img/my-7.png"/>
        </cell>
      </group>
    </div>
    <confirm v-model="serviceShow"
             title="拨打客服电话"
             @on-cancel="onCancel"
             @on-confirm="onConfirm"
             @on-show="onShow"
             @on-hide="onHide">
      <p style="text-align:center;color: red;font-weight: bold;font-size: 1.5rem;line-height: 2.5rem">13777777777</p>
    </confirm>
    <b-tabbar :value="3" />
  </div>
</template>

<script>
import bTabbar from '../../components/Btabbar'
import { Confirm, cookie,Flexbox, FlexboxItem } from 'vux'
export default {
  name: 'my',
  components: {
    bTabbar,
    Confirm,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
    loginStatus: false,
    cellList: [
        {
          title:'我的客户经理',
          icon: require('../../../static/img/my-3.png'),
          path:'manager'
        },
        {
          title:'账号管理',
          icon: require('../../../static/img/my-4.png'),
          path: 'user'
        },
        {
          title:'我的团队',
          icon: require('../../../static/img/my-5.png'),
          path:'team'
        },
        {
          title:'我的推广',
          icon: require('../../../static/img/my-6.png'),
          path:'spread'
        },
      ],
      serviceShow: false
    }
  },
  methods:{
    goWallet () {
      this.$router.push('wallet')
    },
    goCash () {
      this.$router.push('cash')
    },
    service () {
      this.serviceShow = true
    },
    onCancel () {

    },
    onConfirm () {
      this.serviceShow = false
      window.location.href="tel:15757826487"
    },
    onShow () {

    },
    onHide () {

    }
  },
  mounted () {
    if (cookie.get('userInfo')) {
      this.loginStatus = true
    }
  }
}
</script>

<style scoped>
.top{
  width: 100%;
  height: 9.6%;
  background-color: #AD2532;
  box-shadow: 0 0 0 0 rgba(0,0,0,0.25);
}
.tit{
  font-family: PingFangSC-Semibold;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: -0.41px;
  text-align: center;
  margin-left: 45.7%;
  margin-top: 4.8%;
  width: 9.1%;
  height: 3.6%;
}
.part1 {
  position: relative;
  height: 25.9%;
  background-image: url("../../../static/img/5.png");
  background-repeat:no-repeat;
  background-size:100% 70%;
  -moz-background-size:100% 70%;
}
.balance {
  padding-top: 5rem;
  text-align: center;
  color: #FFFFFF;
  line-height: 1.5rem;
  height: 15%;
}
.balance-amount {
  padding-top: 0.7rem;
  font-size: 2.5rem;
  line-height: 5rem;
  color: #FFFFFF;
  height: 10.8%;
}
.login-button {
  margin-top: 0.7rem;
  border-color: #ffffff;
  color: #ffffff;
  font-size: 1rem;
  border-radius: 1.2rem;
  height: 2.4rem;
  width: 8rem;
  line-height: 2.4rem
}
.balance-handle {
  z-index: 2;
  position: absolute;
  display: flex;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 6.9rem;
  background: #ffffff;
  border-radius: 10px 10px 0 0;
}
.balance-detail {
  padding: 1rem 0 ;
  flex: 1;
}
.balance-withdrawal {
  padding: 1rem 0 ;
  flex: 1;
}
.balance-icon {
  display: block;
  margin: 0 auto;
  padding-bottom: 0.7rem;
  height: 3rem;
  width: 3rem;
}
.balance-icon-name {
  font-size: 0.85rem;
  color: #5B5B5B;
  text-align: center;
  line-height: 1.5rem;
}
.gap {
  margin: 1rem 0;
  width: 1px;
  background: #f0f0f0;
}
.group {
  margim-bottom: 5rem;
}
</style>
